import RunnableRuntime from '../containers/runnable-runtime';
import NewRuntimeModal from './new-runtime-modal';
import { Panel, NakePanel, LayerLink } from 'comps/common';
import { Tabs, Button, Icon, Alert, Input } from 'antd';
import RunnableGroupConfig from '../containers/runnable-group-config';
import _ from 'lodash';
import * as React from 'react';

const TabPane = Tabs.TabPane;

class RunnableGroupDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editingRuntimeId: undefined
    };
  }

  onRename(runtimeId, oldName, newName) {
    if (oldName === newName || newName === '') {
      this.setState({
        editingRuntimeId: undefined
      });
      return;
    }
    this.props.onRuntimeRename(runtimeId, newName)
      .then(() => {
        this.setState({
          editingRuntimeId: undefined
        });
      });
  }

  onRenameInputKeyUp(evt, runtimeId, oldName, newName) {
    switch (evt.keyCode) {
      case 13: // Enter
        this.onRename(runtimeId, oldName, newName);
        break;
      case 27:
        this.setState({
          editingRuntimeId: undefined
        });
        break;
      default:
    }
  }

  enableRuntimeNameEdit(runtimeId) {
    this.setState({
      editingRuntimeId: runtimeId
    });
  }

  render() {
    const { error, isFetching, fetched, detail, onRuntimeTabClick, onRuntimeCreate, onRuntimeDelete } = this.props;

    if (!!error) {
      return <Panel><Alert type='error' message={error}/></Panel>;
    }
    if (!fetched && _.isEmpty(detail)) {
      return <NakePanel spinner={isFetching}/>;
    }

    const tabs = _.isEmpty(detail.runnableRuntimes) ? [] : (
      detail.runnableRuntimes.map(({ id, name, groupId }) => {
        const title = (
          <span>
            {this.state.editingRuntimeId === id
              ? <Input style={{ width: '100px' }} type='text' defaultValue={name}
              onBlur={(evt) => this.onRename(id, name, evt.target.value)}
              onKeyUp={(evt) => this.onRenameInputKeyUp(evt, id, name, evt.target.value)}/>
              : <span>{name} <span className='tab-title-button' onClick={() => this.enableRuntimeNameEdit(id)}><Icon
              type='edit'/></span></span>
            }
          </span>
        );
        return (
          <TabPane tab={title} key={id}>
            <RunnableRuntime id={id} groupId={groupId} onRuntimeDelete={onRuntimeDelete}/>
          </TabPane>
        );
      })
    );

    return (
      <NakePanel spinner={isFetching}>
        <div className='runnable-group-detail'>
          <div className='runnable-group-head card-head'>
            <Icon type='share-alt'/>{detail.runnableGroup.name}
          </div>
          <div className='card-content'>
            <p className='runnable-group-desc'>
              <LayerLink component={RunnableGroupConfig} className='group-config-button'
                data={{ groupId: detail.runnableGroup.id }}
              >
                <Icon type='setting'/> 配置
              </LayerLink>
              {detail.runnableGroup.desc || ' '}
            </p>
            {_.isEmpty(detail.runnableRuntimes) ? [
              (<Alert key='alert' showIcon type='info'
                message='创建第一个运行环境'
                description='还没有任何运行环境，创建一个运行环境来开始工作。'
              />),
              <Button key='button' size='large' style={{ display: 'block', width: '100%' }}
                onClick={() => this.refs.newRuntimeModal.show()} type='primary'
              >
                <Icon type='plus-circle-o'/>创建环境
              </Button>
            ] : (
              <Tabs onChange={(key) => onRuntimeTabClick(key)}
                tabBarExtraContent={<Button onClick={() => this.refs.newRuntimeModal.show()}><Icon type='plus-circle-o'/>添加环境</Button>}
              >
                {tabs}
              </Tabs>
            )}
            <NewRuntimeModal ref='newRuntimeModal' groupId={detail.runnableGroup.id} runtimes={detail.runnableRuntimes}
              onRuntimeCreate={onRuntimeCreate}
            />
          </div>
        </div>
      </NakePanel>
    );
  }
}

export default RunnableGroupDetail;
